<template>
  <div>
    <div class="mar_t20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>实时概况</span>
          <span class="fnormal fon_14 color_9 mar_l10">更新时间：{{ dateFormat(date) }}</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">营业总额（元）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{instoreData.inStoreMoney || 0}}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.instorePay || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastPay || 0 }}</p>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">预计收入（元）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ instoreData.instoreActualMoney || 0 }}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.instoreMoney || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastMoney || 0 }}</p>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">有效订单数（单）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{instoreData.inStoreNumCount || 0}}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.inStoreNum || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastNum || 0 }}</p>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">无效订单数（单）</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ instoreData.instoreRefundNumCount || 0 }}</p>
            </div>
          </div>
          <div class="flex">
            <p class="fon_14 color_9 lh25">堂食订单：{{ instoreData.instoreRefundNum || 0 }}</p>
            <p class="fon_14 color_9 lh25 mar_l20">快餐订单：{{ instoreData.fastRefundNum || 0 }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20">
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1 ba_f pad_20 bor_rad5" style="height: 420px">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>堂食总览</span>
            </div>
          </div>
          <div class="flex-bet">
            <div class="flex-g-1">
              <div id="mainEch32" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
            <div class="flex-g-1">
              <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
          </div>
        </div>
        <!--        <div class="flex-g-1 ba_f mar_lr20 pad_20 bor_rad5">-->
        <!--          <div class="shuju_title">-->
        <!--            <div class="shuju_title_text">-->
        <!--              <span>订单渠道</span>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>-->
        <!--        </div>-->
        <div class="flex-g-1 ba_f pad_20 bor_rad5 mar_l20" style="height: 420px">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>快餐总览</span>
            </div>
          </div>
          <div class="flex-bet">
            <div class="flex-g-1">
              <div id="mainEch35" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
            <div class="flex-g-1">
              <div id="mainEch34" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    <div class="t_r mar_t20 ba_f outmain">-->
    <!--      <div class="shuju_title">-->
    <!--        <div class="shuju_title_text">-->
    <!--          <span>数据统计</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="main-icon flex t_l mar_t20">-->
    <!--        <div class="flex-1 t_l pad_20 bortColor bortColor3">-->
    <!--          <div class="flex-bet flex-y-top">-->
    <!--            <div>-->
    <!--              <p class="title6 fon_14">当面付订单（元）</p>-->
    <!--              <p class="fon_30 title35 lh16 pad_tb_20">{{inStoreCashierData.money || 0}}</p>-->
    <!--              <p class="fon_12 title6 lh25">有效订单（单）：{{inStoreCashierData.count || 0}}</p>-->
    <!--              <p class="fon_12 title6 lh25">付款人数（人）：{{inStoreCashierData.userNum || 0}}</p>-->
    <!--            </div>-->
    <!--            <div class="toolTip">-->
    <!--              <el-tooltip effect="dark" placement="top">-->
    <!--                <div slot="content">-->
    <!--                  <p class="lh22">微信支付：{{inStoreCashierData.cashierWxPay}}</p>-->
    <!--                  <p class="lh22">余额支付：{{inStoreCashierData.cashierBalancePay}}</p>-->
    <!--                </div>-->
    <!--                <button type="button"-->
    <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
    <!--                  <span><i class="el-icon-question"></i></span>-->
    <!--                </button>-->
    <!--              </el-tooltip>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="flex-1 t_l pad_20 bortColor bortColor4 mar_l20">-->
    <!--          <div class="flex-bet flex-y-top">-->
    <!--            <div>-->
    <!--              <p class="title6 fon_14">快餐订单（元）</p>-->
    <!--              <p class="fon_30 title35 lh16 pad_tb_20">{{inStoreFastData.money || 0}}</p>-->
    <!--              <p class="fon_12 title6 lh25">有效订单（单）：{{inStoreFastData.count || 0}}</p>-->
    <!--              <p class="fon_12 title6 lh25">付款人数（人）：{{inStoreFastData.userNum || 0}}</p>-->
    <!--            </div>-->
    <!--            <div class="toolTip">-->
    <!--              <el-tooltip effect="dark" placement="top">-->
    <!--                <div slot="content">-->
    <!--                  <p class="lh22">微信支付：{{inStoreFastData.fastWxPay}}</p>-->
    <!--                  <p class="lh22">余额支付：{{inStoreFastData.fastBalancePay}}</p>-->
    <!--                </div>-->
    <!--                <button type="button"-->
    <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
    <!--                  <span><i class="el-icon-question"></i></span>-->
    <!--                </button>-->
    <!--              </el-tooltip>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="flex-1 t_l pad_20 bortColor bortColor5 mar_l20">-->
    <!--          <div class="flex-bet flex-y-top">-->
    <!--            <div>-->
    <!--              <p class="title6 fon_14">堂食订单（元）</p>-->
    <!--              <p class="fon_30 title35 lh16 pad_tb_20">{{inStoreData.instorePay || 0}}</p>-->
    <!--              <div class="flex">-->
    <!--                <p class="fon_12 title6 lh25">线上订单（单）：{{inStoreData.instoreCount || 0}}</p>-->
    <!--                <p class="fon_12 title6 lh25 mar_l30">线下订单数（单）：{{inStoreData.instoreBalanceOfflineCount || 0}}</p>-->
    <!--              </div>-->
    <!--              <div class="flex">-->
    <!--                <p class="fon_12 title6 lh25">实收金额：{{inStoreData.instoreActualPay || 0}}</p>-->
    <!--                <p class="fon_12 title6 lh25 mar_l30">营业额：{{inStoreData.instorePay || 0}}</p>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <div class="toolTip">-->
    <!--              <el-tooltip effect="dark" placement="top">-->
    <!--                <div slot="content">-->
    <!--                  <p class="lh22">微信支付：{{inStoreData.instoreWxPay}}</p>-->
    <!--                  <p class="lh22">余额支付：{{inStoreData.instoreBalancePay}}</p>-->
    <!--                  <p class="lh22">线下支付：{{inStoreData.instoreBalanceOfflinePay}}</p>-->
    <!--                </div>-->
    <!--                <button type="button"-->
    <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
    <!--                  <span><i class="el-icon-question"></i></span>-->
    <!--                </button>-->
    <!--              </el-tooltip>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="mar_t20 pad_20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>商品看板</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1" style="height: 520px;">
          <div class="flex t_l">
            <div class="title35">堂食TOP10商品</div>
            <!--            <div class="toolTip mar_l10">-->
            <!--              <el-tooltip effect="dark" placement="top">-->
            <!--                <div slot="content">统计周期内，店内TOP10商品</div>-->
            <!--                <button type="button"-->
            <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
            <!--                  <span><i class="el-icon-question"></i></span>-->
            <!--                </button>-->
            <!--              </el-tooltip>-->
            <!--            </div>-->
          </div>
          <div class="mar_t10 shuju_table">
            <el-table
                :data="goodsData"
                stripe
                style="width: 100%">
              <el-table-column
                  prop="id"
                  label="排名"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="name"
                  label="商品名称"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="num"
                  label="商品销量数">
              </el-table-column>
              <el-table-column
                  prop="money"
                  label="销售额">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="flex-g-1 mar_l30" style="height: 520px;">
          <div class="flex t_l">
            <div class="title35">快餐TOP10商品</div>
            <!--            <div class="toolTip mar_l10">-->
            <!--              <el-tooltip effect="dark" placement="top">-->
            <!--                <div slot="content">统计周期内，快餐TOP10商品</div>-->
            <!--                <button type="button"-->
            <!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
            <!--                  <span><i class="el-icon-question"></i></span>-->
            <!--                </button>-->
            <!--              </el-tooltip>-->
            <!--            </div>-->
          </div>
          <div class="mar_t10 shuju_table">
            <el-table
                :data="orderData"
                stripe
                style="width: 100%"
            >
              <el-table-column
                  prop="id"
                  label="排名"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="name"
                  label="商品名称"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="money"
                  label="销售额">
              </el-table-column>
              <el-table-column
                  prop="num"
                  label="商品销量">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getStatistics} from "@/api/instore";
import echarts from "echarts";
import {mapState} from "vuex";
export default {
  computed: {
    ...mapState(['storeId']),
  },
  mounted() {
    this.bus.$emit('loading', true);
    this.init();
    // this.mainEch32()
    // this.mainEch33()
    // this.mainEch34()
    // this.mainEch35()
  },
  data () {
    return {
      instoreData:{},
      inStoreCashierData:{},
      inStoreFastData:{},
      inStoreData:{},
      goodsData: [],
      orderData: [],
      echarts32_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信小程序', '支付宝小程序', '收银台']
        },
        series: [
          {
            name: '有效订单',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信小程序'},
              {value: 20.00, name: '支付宝小程序'},
              {value: 20.00, name: '收银台'},
            ],
          }
        ]
      },
      echarts33_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信支付', '支付宝支付', '余额支付', '现金支付', '自有支付方式']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信支付'},
              {value: 20.00, name: '支付宝支付'},
              {value: 20.00, name: '余额支付'},
              {value: 20.00, name: '现金支付'},
              {value: 20.00, name: '自有支付方式'},
            ],
          }
        ]
      },
      echarts34_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信支付', '支付宝支付', '余额支付', '现金支付', '自有支付方式']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信支付'},
              {value: 20.00, name: '支付宝支付'},
              {value: 20.00, name: '余额支付'},
              {value: 20.00, name: '现金支付'},
              {value: 20.00, name: '自有支付方式'},
            ],
          }
        ]
      },
      echarts35_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信小程序', '支付宝小程序', '收银台']
        },
        series: [
          {
            name: '有效订单',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信小程序'},
              {value: 20.00, name: '支付宝小程序'},
              {value: 20.00, name: '收银台'},
            ],
          }
        ]
      },
      date: new Date(),
    }
  },
  methods: {
    async init(){
      const {data} = await getStatistics({storeId:this.storeId,});
      if (data) {
        this.instoreData=data;
        this.inStoreCashierData = data.inStoreCashierData
        this.inStoreFastData = data.inStoreFastData
        this.inStoreData = data.inStoreData
        this.echarts32_option.series[0].data[0].value = +data.wxPaySum;
        this.echarts32_option.series[0].data[1].value = +data.aliPaySum;
        this.echarts32_option.series[0].data[2].value = +data.cashierPaySum;
        this.mainEch32()
        this.echarts33_option.series[0].data[0].value = +data.wxPay;
        this.echarts33_option.series[0].data[1].value = +data.aliPay;
        this.echarts33_option.series[0].data[2].value = +data.balancePay;
        this.echarts33_option.series[0].data[3].value = +data.moneyPay;
        this.echarts33_option.series[0].data[4].value = +data.myselfPay;
        this.mainEch33()
        this.echarts35_option.series[0].data[0].value = +data.fWxPaySum;
        this.echarts35_option.series[0].data[1].value = +data.fAliPaySum;
        this.echarts35_option.series[0].data[2].value = +data.fCashierPaySum;
        this.mainEch35()
        this.echarts34_option.series[0].data[0].value = +data.fWxPay;
        this.echarts34_option.series[0].data[1].value = +data.fAliPay;
        this.echarts34_option.series[0].data[2].value = +data.fBalancePay;
        this.echarts34_option.series[0].data[3].value = +data.fMoneyPay;
        this.echarts34_option.series[0].data[4].value = +data.fMyselfPay;
        this.mainEch34()
        this.goodsData = data.inStoreGoodsData?data.inStoreGoodsData:[]
        this.orderData = data.fastGoodsData?data.fastGoodsData:[]
        this.bus.$emit('loading', false)
      }
    },
    mainEch32() {
      let myChart = echarts.init(document.getElementById('mainEch32'))
      myChart.setOption(this.echarts32_option, true)
    },
    mainEch33() {
      let myChart = echarts.init(document.getElementById('mainEch33'))
      myChart.setOption(this.echarts33_option, true)
    },
    mainEch34() {
      let myChart = echarts.init(document.getElementById('mainEch34'))
      myChart.setOption(this.echarts34_option, true)
    },
    mainEch35() {
      let myChart = echarts.init(document.getElementById('mainEch35'))
      myChart.setOption(this.echarts35_option, true)
    },
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
  }
}
</script>
